<script setup lang="ts"></script>
<template>
  <div>
    <svg 
      width="16.000000" 
      height="16.000000" 
      viewBox="0 0 16 16" 
      fill="none" 
      id="image"
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs/>
      <path id="circleLoading" d="M0 8C0 3.58154 3.58179 0 8 0C12.4182 0 16 3.58154 16 8C16 12.4185 12.4182 16 8 16C4.83789 16 2.01221 14.1484 0.720703 11.3223C0.248047 10.2886 0 9.16113 0 8ZM14.3999 8C14.3999 4.46533 11.5347 1.6001 8 1.6001C4.46533 1.6001 1.6001 4.46533 1.6001 8C1.6001 8.93018 1.7981 9.83105 2.17578 10.6572C3.20947 12.9185 5.46997 14.3999 8 14.3999C11.5347 14.3999 14.3999 11.5347 14.3999 8Z" clip-rule="evenodd" fill="#E4EAF1" fill-opacity="1.000000" fill-rule="evenodd"/>
      <path id="pathLoading" d="M8 0C12.41 0 16 3.58 16 8C16 12.41 12.41 16 8 16C7.55 16 7.19 15.64 7.19 15.2C7.19 14.75 7.55 14.39 8 14.39C11.53 14.39 14.39 11.53 14.39 8C14.39 4.46 11.53 1.6 8 1.6C4.46 1.6 1.6 4.46 1.6 8C1.6 8.44 1.24 8.79 0.8 8.79C0.35 8.79 0 8.44 0 8C0 3.58 3.58 0 8 0Z" fill="#0077FF" fill-opacity="1.000000" fill-rule="evenodd"/>
    </svg>
  </div>
</template>
<style lang="scss" scoped>
#image {
  transform-origin: center center;
  animation: animationPillar 1.5s infinite linear;
}
@keyframes animationPillar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
